<!-- 天气组件 显示当前温度和天气状况，将获取方法：fetchWeatherData放入mount，在页面中挂载调用，直接加载天气数据
 添加刷新键，绑定fetchWeatherData，进行刷新
 遇到问题：天气状况：data.weather.main获取不到数据
 解决：
  /* data.weather获取的数据格式：[ { "id": 803, "main": "Clouds", "description": "broken clouds", "icon": "04d" } ]
            如果要访问main,需要通过data.weather[0].main来访问，不能直接访问data.weather.main，会返回无定义*/
          };-->
<template>
  <div>
    <div class="weather-container">
      <div class="weather-info">
        <p>温度: {{ weatherData.temperature }}°C</p>
        <p>天气: {{ weatherData.weather }}</p>
        <!-- <p>风速: {{ weatherData.windSpeed }} m/s</p> -->
      </div>
      <el-button @click="fetchWeatherData" class="refresh-button">
        <i class="el-icon-refresh"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      weatherData: {}, // 存储天气数据
      weatherUpdateTime: '',// 存储数据更新时间
      timerId: null,// 存储定时器ID

    };
  },
  mounted () {
    this.fetchWeatherData();
    this.timerId = setInterval(this.fetchWeatherData, 14400000); // 每四小时更新一次天气数据

  },
  methods: {
    fetchWeatherData () {
      console.log('刷新')
      const apiKey = '5c9dbef1bf937d326b96a5ff0d86165b'; // OpenWeatherMap API Key
      const city = 'xian';
      const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          this.weatherData = {
            temperature: data.main ? data.main.temp : '--',//当前温度
            windSpeed: data.wind ? data.wind.speed : '--',//风速
            weather: data.weather ? data.weather[0].main : '--',//天气状况
          };
          this.weatherUpdateTime = new Date().toLocaleString();
        })
        .catch(error => {
          console.error('获取气象数据失败', error);
          alert('获取天气数据失败，请检查城市名称或网络连接。');
        });
    },

    beforeDestroy () {
      if (this.timerId) {
        clearInterval(this.timerId); // 清除定时器
      }
    }
  }
};
</script>

<style scoped>
.weather-container {
  display: flex;
  align-items: center;
  margin: 0 0 0 0;
  padding: 5px;
  color: white; /* 文字颜色为白色 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  text-align: center;
  height: 60px;
}

.weather-info {
  flex: 1; /* 占据剩余空间 */
  margin-right: 10px; /* 右边距 */
}

.weather-info p {
  margin: 5px 0;
  font-size: 16px;
  color: white; /* 段落颜色为白色 */
}

.refresh-button {
  background-color: rgba(255, 255, 255, 0.5); /* 白色半透明背景 */
  color: black; /* 图标颜色为黑色 */
  border: none;
  padding: 6px; /* 调整内边距以适应图标大小 */
  border-radius: 50%; /* 圆形按钮 */
  cursor: pointer;
  transition: background-color 0.3s;
}

.refresh-button i {
  font-size: 12px; /* 图标大小 */
}

.refresh-button:hover {
  background-color: rgba(255, 255, 255, 0.8); /* 悬停时的背景颜色 */
}
</style>